<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-11 18:59:33
 * @LastEditTime: 2019-09-17 12:28:30
 * @LastEditors: Please set LastEditors
 -->
<template>
  <Row class="mo-read">
    <Col :lg="{span:12,offset:6}" class="readbox">
      <Breadcrumb separator=">" class="breadcrumb">
        <BreadcrumbItem to="/">首页</BreadcrumbItem>
        <BreadcrumbItem to="/article">文章</BreadcrumbItem>
        <BreadcrumbItem>技术</BreadcrumbItem>
      </Breadcrumb>
      <h1>标题：{{str.ititle}}</h1>
      <div class="readbox-mes">
        <img :src="artuser.avatar" alt />
        <span>{{artuser.nickname}}</span>
        <span>发布时间: {{this.$moment(str.createdAt).format("YYYY-MM-DD")}}</span>
        <span>活跃时间: {{this.$moment(str.updatedAt).format("YYYY-MM-DD")}}</span>
        <span>点击量: {{str.isee}}</span>
      </div>
      <div v-html="str.article" class="ql-editor"></div>
      <div class="readbox-pl" id="pl-input">
        <h2>我要说两句</h2>
        <div class="pl-input">
          <textarea
            type="text"
            placeholder="输入你的评论"
            maxlength="100"
            v-model="review"
            v-if="islogin===1"
            onkeyup="this.value=this.value.replace(/\s+/g,'')"
          />
          <textarea
            type="text"
            placeholder="请先登录"
            maxlength="100"
            v-model="review"
            disabled
            v-if="islogin===0"
          />
          <div class="pl-input-btn">
            <button v-if="islogin===1" @click="doReview">发表评论</button>
          </div>
        </div>
        <h2>当前评论({{reviewCount}})</h2>
        <say-article
          @getReviewTo="answerReview"
          v-for=" v,i in plList"
          :key="i"
          :value="v"
          :reviewrank="i"
          :userid="ownerId"
          @reload="getReview"
        ></say-article>
        <div class="see-more" v-if="hasMore" @click="seeMore">查看更多</div>
        <div v-if="!hasMore">一滴都没有了</div>
      </div>
    </Col>
  </Row>
</template>
<script>
import $ from "jquery";
import sayArticle from "../readArticle/sayArticle/sayarticle";
import { Breadcrumb, BreadcrumbItem, Scroll, Card } from "view-design";
import encrypt from "@/config/encrypt";
export default {
  name: "moRead",
  data() {
    return {
      str: {},
      artuser: {},
      reviewObject: "",
      islogin: 0,
      ownerId: "",
      reviewTo: "", //评论对象
      review: "", //评论
      articleId: "", //文章ID
      reviewList: [],
      list: [],
      hasmore: false, //是否还有评论
      reviewCount: "0",
      islock: ""
    };
  },
  computed: {
    //是否还有更多评论
    hasMore: function() {
      return this.hasmore;
    },
    //评论列表
    plList: function() {
      return this.list;
    }
  },
  created() {
    //获取用户状态
    this.$axios.get(this.$store.getters.url + "/nowlogin").then(res => {
      if (!!res.data) {
        this.islogin = 1;
        this.ownerId = res.data.id;
        this.islock = res.data.lock;
      }
    });
    //获取文章信息
    this.getArticle();
  },
  mounted() {},
  methods: {
    //评论带回复
    answerReview: function(e) {
      this.review = e.owner;
      this.reviewTo = e.reviewTo;
    },
    //发表评论
    doReview: function() {
      if (!!this.review) {
        this.$axios
          .get(this.$store.getters.url + "/review", {
            params: {
              review: this.review,
              reviewTo: this.reviewTo,
              ownerId: this.ownerId,
              articleId: this.articleId
            }
          })
          .then(res => {
            if (res.data.code == "418") {
              this.$Message.info("发言间隔太短！");
            } else {
              // this.list.unshift(res.data.result2);
              this.getReview();
              this.$Message.success(res.data.msg);
              this.review = null;
              this.reviewTo = "";
              console.log(this.list);
            }
          });
      } else {
        this.$Message.info("评论不可为空！");
      }
    },
    //查看更多
    seeMore: function() {
      if (this.reviewList.length - this.list.length >= 5) {
        for (let i = 0; i < 5; i++) {
          this.list.push(this.reviewList[this.list.length + i]);
        }
      } else if (this.reviewList.length - this.list.length < 5) {
        for (let i = 0; i < this.reviewList.length - this.list.length; i++) {
          this.list.push(this.reviewList[this.list.length + i]);
        }
        this.$Message.success("全部加载完成了！");
        this.hasmore = false;
      }
    },
    //获取文章相关信息
    getArticle: function() {
      this.$axios
        .get(
          this.$store.getters.url +
            "/read?artid=" +
            this.$router.history.current.query.artid
        )
        .then(res => {
          // $(".readbox").html(res.data);
          this.str = res.data.data;
          this.artuser = res.data.data.artuser;
          // console.log(this.str)
          this.articleId = res.data.data.id;
        })
        .then(() => {
          //获取评论
          this.getReview();
        });
    },
    //获取文章评论
    getReview: function() {
      this.$axios
        .get(
          this.$store.getters.url +
            "/getReview?articleId=" +
            this.articleId +
            "&page=0"
        )
        .then(res => {
          console.log(res.data.result);
          this.reviewList = res.data.result;
          this.reviewCount = res.data.result2;
          //获取前5个
          this.list = res.data.result.slice(0, 5);
          if (this.reviewCount > 5) {
            this.hasmore = true;
          } else {
            this.list = res.data.result;
            this.hasmore = false;
          }
        });
    }
  },
  components: {
    "say-article": sayArticle,
    Breadcrumb,
    BreadcrumbItem
  }
};
</script>
<style lang="scss" scoped>
.mo-read {
  position: relative;
  display: inline-block;
  width: 100%;
  min-height: 400px;
  overflow: auto;
  &::-webkit-scrollbar {
    display: none;
  }
  .readbox {
    position: relative;
    height: 100%;
    .breadcrumb {
      width: 100%;
      height: auto;
      background-color: white;
      text-align: left;
      padding-left: 15px;
      padding-top: 10px;
    }
    h1 {
      padding-top: 10px;
      background-color: white;
      text-align: left;
      padding-left: 15px;
    }
    .readbox-mes {
      display: flex;
      justify-content: flex-start;
      background-color: white;
      font-size: 14px;
      padding-left: 15px;
      padding-top: 5px;
      padding-bottom: 5px;
      align-items: center;
      height: auto;
      img {
        width: 30px;
        height: 30px;
        border-radius: 15px;
        margin-right: 5px;
      }
      span:not(:nth-last-child(1)) {
        font-size: 14px;
        padding-right: 10px;
      }
    }
    .readbox-pl {
      width: 100%;
      height: auto;
      padding: 15px;
      background-color: white;
      h2 {
        text-align: left;
      }
      .see-more {
        padding: 5px;
        cursor: pointer;
        background-color: rgba(0, 0, 0, 0.1);
        border-radius: 3px;
        &:hover {
          background-color: rgba(0, 0, 0, 1);
          color: white;
        }
      }
      .pl-input {
        width: 100%;
        height: auto;
        textarea {
          width: 100%;
          height: 60px;
          margin-top: 10px;
          margin-bottom: 5px;
          padding: 10px;
        }
        .pl-input-btn {
          width: 100%;
          display: flex;
          justify-content: flex-end;
          button {
            outline: none;
            border: 1px solid black;
            background-color: white;
            padding-left: 10px;
            padding-right: 10px;
            padding-top: 2px;
            padding-bottom: 2px;
            cursor: pointer;
            &:hover {
              background-color: black;
              color: white;
            }
          }
        }
      }
    }
  }
}
.ql-editor {
  background-color: white;
}
</style>